<script setup>

import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import { message } from 'ant-design-vue';

// 查询
const pageSize = ref(10);
const pageNo = ref(1)
const items = ref([]);
const loading = ref(true);
const confirmLoading = ref(false);
const totalItems = ref(0);
const pagination = computed(() => ({
    total: totalItems.value,
    current: pageNo.value,
    pageSize: pageSize.value
})) 
const columns = ref([
    {
        title: "ID",
        dataIndex: "userId",
        key: 'userId'
    },
    {
        title: "名称",
        dataIndex: "username",
        key: 'username'
    },
    {
        title: "角色",
        dataIndex: "roleId"
    },
    {
        title: "状态",
        dataIndex: "status",
    },
    {
        title: "操作",
        dataIndex: "action"
    }
])
const open = ref(false);
const title = ref("");
const formData = ref({});

function loadItems({page, itemsPerPage}) {
    loading.value = true;
    pageNo.value = page
    pageSize.value = itemsPerPage
    axios.post('/User/getUserList', {
        page: page,
        pageSize: itemsPerPage,
        username: ''
    }).then(({data}) => {
        items.value = data.data.records;
        totalItems.value = data.data.total;
        loading.value = false;
    })
}

const roleList = ref([]);
onMounted(() => {
    loadItems({page: 1, itemsPerPage: pageSize.value});
    axios.post('/Role/getRoleList', {
        page: 1,
        pageSize: 1000
    }).then(({data}) => {
        roleList.value = data.data.records;
    })
});

const dialogEnum = {
    update: "编辑",
    create: "新增"
}
function openRole() {
    open.value = true
    title.value = dialogEnum.create
    formData.value = {
        username: "",
        password: "",
        roleId: 1
    }
}

function openData(data) {
    open.value = true
    title.value = dialogEnum.update
    formData.value = data
}

function submit() {
    if(title.value == dialogEnum.create) {
        confirmLoading.value = true
        axios.post("/User/addUser", formData.value).then(res => {
            if(res.data.code == 0) {
                message.success('新增成功！')
                confirmLoading.value = false;
                open.value = false;
                loadItems({page: 1, itemsPerPage: pageSize.value});
            } else {
                confirmLoading.value = false;
                message.error(res.data.message)
            }
        }, err => {
            confirmLoading.value = false;
            message.error(err.data.message)
        })
    } else if(title.value == dialogEnum.update) {
        confirmLoading.value = true
        if(formData.value.passwordUpdate) {
            formData.value.password == formData.value.passwordUpdate
        }
        axios.post("/User/updateUser", formData.value).then(res => {
            if(res.data.code == 0) {
                message.success('修改成功！')
                confirmLoading.value = false;
                open.value = false;
                loadItems({page: 1, itemsPerPage: pageSize.value});
            } else {
                confirmLoading.value = false;
                message.error(res.data.message)
            }
        }, err => {
            confirmLoading.value = false;
            message.error(err.data.message)
        })
    }
}

function deleteRole(item, type) {
    axios.post("/User/disableUser", {userId: item.userId, status: type}).then(res => {
        if(res.data.code == 0) {
            message.success('操作成功！')
            loadItems({page: 1, itemsPerPage: pageSize.value});
        } else {
            message.error(res.data.message)
        }
    }, err => {
        message.error(err.data.message)
    })
}

function handleTabChange(pag){
    loadItems({page: pag.current, itemsPerPage: pag.pageSize})
}
</script>

<template>
    <a-spin size="large" :spinning="loading">
        <a-card title="用户管理">
            <template #extra>
                <a-button type="primary" @click="openRole">新增用户</a-button>            
            </template>
            <a-table :dataSource="items" :columns="columns" :pagination="pagination" @change="handleTabChange">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex == 'status'">
                        <span v-if="record.status">启用</span>
                        <span v-else>禁用</span>
                    </template>
                    <template v-if="column.dataIndex == 'roleId'">
                        <span v-for="k in roleList" v-show="record.roleId == k.roleId">{{ k.roleName }}</span>
                    </template>
                    <template v-if="column.dataIndex == 'action'">
                        <a @click="openData(record)">修改</a>
                        <span>&nbsp;&nbsp;</span>
                        <a-popconfirm
                        v-if="record.status"
                        title="确认禁用该用户？"
                        okText="确认"
                        cancelText="取消"
                        @confirm="deleteRole(record, false)">
                            <a>禁用</a>                        
                        </a-popconfirm>
                        <a-popconfirm
                        v-else
                        title="确认启用该用户？"
                        okText="确认"
                        cancelText="取消"
                        @confirm="deleteRole(record, true)">
                            <a>启用</a>                        
                        </a-popconfirm>
                    </template>
                </template>
            </a-table>            
        </a-card>

        <a-modal
        v-model:open="open"
        :title="title"
        cancelText="关闭"
        okText="确定"
        :confirmLoading="confirmLoading"
        @ok="submit">
            <a-form
            :colon="false"
            :model="formData"
            :label-col="{ span: 5 }">
                <a-form-item
                label="用户名称"
                :rules="[{ required: true, message: '请输入用户名称！' }]">
                    <a-input
                    v-model:value="formData.username"
                    placeholder="请输入用户名称"></a-input>
                </a-form-item>
                <a-form-item
                v-if="title == '新增'"
                label="用户密码"
                :rules="[{ required: true, message: '请输入用户密码！' }]">
                    <a-input-password
                    v-model:value="formData.password"
                    placeholder="请输入用户密码"></a-input-password>
                </a-form-item>
                <a-form-item
                v-else
                label="修改密码">
                    <a-input-password
                    v-model:value="formData.passwordUpdate"
                    placeholder="密码"></a-input-password>
                </a-form-item>
                <a-form-item
                label="用户角色"
                :rules="[{ required: true, message: '请选择用户角色！' }]"
                >
                    <a-select
                    v-model:value="formData.roleId"
                    placeholder="请选择用户角色">
                        <a-select-option v-for="item in roleList" :value="item.roleId">{{ item.roleName }}</a-select-option>
                    </a-select>
                </a-form-item>
            </a-form>
        </a-modal>
    </a-spin>
</template>

<style scoped lang="less">

</style>
